
<template>
  <!-- 这边显示 还是和上面耦合的啊 -->
  <div class="dtInfosWrap " :class="{'hidden':placeData.hover==false}" :key="placeData.id">
    <ul class="gwyxx" v-for="(info) in placeData.infos" :key="'info_'+info.id">

<!-- @mouseover="selectStyle (info,'hover') " :class="{'bg-yellow':placeData.hover}" @mouseout="outStyle(info,'hover')" -->
      <li  :key="placeData.id">
        <a :href="info.herf" target="_blank" class="clearfix" :title="info.title" :tabindex="info.tabindex" style="display: block;">
          <em></em>
          <span class="Title text-tag" tabindex="-1">{{info.text}}</span>
          <span class="Days text-tag" tabindex="-1">{{info.date}}</span></a>

      </li>
    </ul>
  </div>
</template>

        
<style>
@import "../../css/zj_index.css";
@import "../../css/zj_index2.css";

.bg-yellow{
  background: yellow;
}
</style>


<script>
// 引入axios HTTP module to submit login form
// import {
//   isNull,
//   axiosRequest,
//   storageOperation
// } from '@/common/common'
// import {
//   commonConfig
// } from '@/config/commonConfig';

// import HoverShow from '@/components/HoverShow/HoverShow';

// 这样不能引入 组件
//  import {
//   HoverShow
// } from '@/HoverShow/HoverShow';

// 需要引入， 不引入好像也没事？
// 并不是 是需要引入的  之前是没刷新
// import data from '@/util/mock.js';
// 可以  但是这个data 是什么
// 是一整个mock 对象  其实叫做 Mock 更好吧
// 因为那边 export 了
// import Mock from '@/util/mock.js';
// console.log("data");
// console.log(data);

// require('@/util/mock.js');
// require 可以
// 这是正常的

// import data from 'src/util/mock.js';
// 从src 就错了
export default {
  // 一个 warp 底下一个列表
  name: "DataInfosWrap",
  // name: 'hover-show',
  // 这name 是不是没关系的啊
  // js hover


  // props: {
  //   // infos: Array,
  //   place: Object,
  //   // selectValue: Object
  // },

  // props:["place"],
  mounted() {
    console.log("this.place");
    console.log(this.place);
    this.placeData = this.place;
  },
  data() {
    // 这里的数据删掉 就可以正常的用父组件的 数据了
    // xhr.js?74b8:160 POST http://10.50.75.111:9888/api/User/Login net::ERR_CONNECTION_TIMED_OUT
    // 局域网
    var validateUsrName = (rule, value, callback) => {
      if (!value) {
        return callback(new Error("用户名不能为空"));
      } else callback();
    };
    var checkPass = (rule, value, callback) => {
      if (value === "") {
        callback(new Error("请输入密码"));
      } else callback();
    };
    // mock js

    // ————————————————
    // 版权声明：本文为CSDN博主「sunshine_ping」的原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接及本声明。
    // 原文链接：https://blog.csdn.net/sunshine_ping/article/details/80269707

      var  placeDataFake={
        id: 1,
        select: "第一行",
        icon: 1,
        url: "http://www.gov.cn/pushinfo/v150203/index.htm",
        name: "国务院",
        tabindex: 68,
        infos: [
          {
            // 字符串带着 .. 就报错  vue
            id: 1,
            href: "http://www.gov.cn/premier/2021-08/25/content_5633325.htm",
            title:
              "李克强主持召开国务院常务会议 部署全面推动长江经济带...2021-08-25",
            // tabindex="74",
            // 错误 在这里写了等于号
            tabindex: "74",
            text: "李克强主持召开国务院常务会议 部署全面推动长江经济带...",
            date: "2021-08-25"
          }
        ]
      };


    return {

    

      items: [
        { select: "第一行", icon: 1 },
        { select: "第二行", icon: 2 },
        { select: "第三行", icon: 3 },
        { select: "第四行", icon: 4 }
      ],
      // <li className=""><span onClick="window.open('http://www.gov.cn/pushinfo/v150203/index.htm')"
      //                        tabIndex="68" className="text-tag">国务院</span></li>
      // < li
      // className = "" > < span
      // onClick = "window.open('http://www.zj.gov.cn/col/col1554467/index.html')"
      // tabIndex = "69"
      // className = "text-tag" > 省政府 < /span></
      // li >
      // < li
      // className = "" > < span
      // onClick = "window.open('http://www.zj.gov.cn/col/col1554468/index.html')"
      // tabIndex = "70"
      // className = "text-tag" > 部门 < /span></
      // li >
      // < li
      // className = "" > < span
      // onClick = "window.open('http://www.zj.gov.cn/col/col1554469/index.html')"
      // tabIndex = "71"
      // className = "text-tag" > 市 < /span></
      // li >
      // < li
      // className = "Hover" > < span
      // onClick = "window.open('http://www.zj.gov.cn/col/col1554470/index.html')"
      // tabIndex = "72"
      // className = "text-tag" > 县（市、区）</span></li>

      //           <a :href="info.herf" target="_blank"
      //      class="clearfix" title="李克强主持召开国务院常务会议 部署全面推动长江经济带...2021-08-25" tabindex="74"
      //      style="display: block;"><em></em><span class="Title text-tag"
      //                                             tabindex="-1">李克强主持召开国务院常务会议 部署全面推动长江经济带...</span><span
      // class="Days text-tag"
      // tabindex="-1">2021-08-25</span></a>

      // 需要这里定义，这里的才是 templete 可以获得的
    
      // placeData:{},
      // 会有多个
       placeData:placeDataFake,
     
      postUrl: "1",
      firHeaderTle: "重点营运车辆动态信息",
      secHeaderTle: "公共监管与服务平台",
      labelPosition: "right",
      ruleForm2: {
        usrname: "",
        pass: ""
      },
      rules2: {
        usrname: [
          {
            validator: validateUsrName,
            trigger: "blur"
          }
        ],
        pass: [
          {
            validator: checkPass,
            trigger: "blur"
          }
        ]
      }
    };
  },
  // 上面也写了 props 然后就一直没发现下面写了,然后类型不匹配..
  props: {
    // Array 
    place: Object,
    selectValue: Object
  },
  // https://www.cnblogs.com/pengfei-nie/p/9134367.html
  mounted() {
    this.data = this.dataInfos;
  },
  methods: {
    windowOpen(url) {
      window.open(url);
    },
    selectStyle(item) {
      // console.log("selectStyle");

      var _this = this;
      // console.log("_this")
      // console.log(_this)
      // _this 是被选中的
      // 防止没有渲染出来吗
      this.$nextTick(function() {
        // console.log("this");
        // console.log(this);
        this.items.forEach(function(eachItem) {
          // console.log("_this in");
          // console.log(_this);
          // this.$set(item,'active',false);
          // 这样会没有
          _this.$set(eachItem, "hover", false);
          // console.log("this in");
          // console.log(this);
        });
        // this 代表vue
        this.$set(item, "hover", true);
      });
    },

      selectStyle(item,attrName) {
      // console.log("selectStyle");

      var _this = this;
      // console.log("_this")
      // console.log(_this)
      // _this 是被选中的
      // 防止没有渲染出来吗
      this.$nextTick(function() {
        // console.log("this");
        // console.log(this);
        this.items.forEach(function(eachItem) {
          // console.log("_this in");
          // console.log(_this);
          // this.$set(item,'active',false);
          // 这样会没有
          _this.$set(eachItem, attrName, false);
          // console.log("this in");
          // console.log(this);
        });
        // this 代表vue
        this.$set(item, attrName, true);
      });
    },


    outStyle(item) {
      // console.log("outStyle");
      this.$set(item, "hover", false);
    },

      outStyle(item,attrName) {
      // console.log("outStyle");
      this.$set(item, attrName, false);
    }
  }
  //  components: {
  //   HoverShow
  // }
};
</script>
